import {
  Button,
  Col,
  Form,
  Input,
  Row,
  Modal,
  Image,
} from 'antd';
import React, { useState } from 'react';

interface ModalParam {
  data: string;
  onFinish: (value: string) => void;
  onCancel: () => void;
}

interface CaptchaParams {
  captcha: string;
}

export default ({
  data,
  onFinish,
  onCancel,
}: ModalParam) => {
  const [form] = Form.useForm();
  const handleOk = () => {
    form
      .validateFields()
      .then((values: CaptchaParams) => {
        form.resetFields();
        console.log('validateFields', values);
        onFinish(values.captcha);
      })
      .catch(error => {
        console.log('Validate Failed:', error);
      });
  }

  return (
    <Modal
      open={true}
      width={400}
      okText="确认"
      onOk={handleOk}
      onCancel={onCancel}
      footer={[
        <Button key="submit" type="primary" onClick={handleOk}>确认</Button>,
      ]}
    >
      <Form
        form={form}
        name="form_in_modal"
      >
        <Row gutter={8}>
          <Col flex='auto'>
            <Form.Item
              name="captcha"
              rules={[{ required: true, message: '请输入验证码!' }]}
            >
              <Input
                placeholder='请输入验证码'
                maxLength={4}
                style={{ height: '44px' }}
              />

            </Form.Item>
          </Col>
          <Col flex='140px'>
            <Image src={data} preview={false} />
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
